<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<title>Canvas</title>
		<script type="text/javascript" src="../build/dist.js"></script>
		<!--[if IE]><script src="../excanvas/excanvas.js"></script><![endif]-->
	</head>
	<body>
		<h1>Click on the canvas</h1>
		<canvas id="c" width="400" height="300"></canvas>
		<script type="text/javascript">//<![CDATA[
var canvas, ctx, touches=[];
window.onload = function() {
	try {
		var el=document.getElementById('c');
		canvas=new Curly.Canvas(el);
		el.style.border='1px solid #AAA';
		/*el.style.position='absolute';
		el.style.left='50%';
		el.style.top='50%';
		el.style.marginLeft=-(canvas.getWidth()>>1)+'px';
		el.style.marginTop=-(canvas.getHeight()>>1)+'px';*/
		
		ctx=canvas.getCtx();
		
		if(el.addEventListener) {
			el.addEventListener('click', onClick, true);
			el.addEventListener('touchend', onClick, true); // Support for iPhone/iPod Touch
		}
		else {
			el.attachEvent('onclick', onClick);
		}
		
		setInterval(draw, 50);
	}
	catch(e) {
		alert(e);
	}
}

function addTouch(x, y){
	touches.push({
		x: x,
		y: y,
		a: 100
	});
}

function onClick(event){
	event=event||window.event;
	var x, y;
	if(event.touches) {
		for(var i=0, n=event.touches.length; i<n; i++) {
			addTouch(event.touches[i].pageX, event.touches[i].pageY);
		}
	}
	else if(event.layerX!==undefined) {
		addTouch(event.layerX-event.target.offsetLeft, event.layerY-event.target.offsetTop);
	}
	else {
		addTouch(event.offsetX, event.offsetY);
	}
}

function draw() {
	var r=20;
	canvas.clear();
	for (var i = 0; i < touches.length; i++) {
		var touch=touches[i];
		
		var gradient = new Curly.Gradient.Radial({
			x: touch.x,
			y: touch.y,
			r: r,
			stops: [
				[0, 'rgba(255, 0, 0, 100)'],
				[1, 'rgba(255, 0, 0, 0)']
			]
		});
		//alert(gradient.stops[0][1]);
		
		canvas.
			overwriteState('fillStyle', gradient).
			overwriteState('alpha', touch.a/100.0).
			path(touch.x, touch.y).
			arc(r).
			draw(true, false);
		
		touch.a-=2;
		if(touch.a<=0) {
			touches.splice(i, 1);
			i--;
		}
	}
}
//		]]></script>
	</body>
</html>